<template>
<div>
  <div id = "box1" align="center">加密算法  {{ name }} </div>
  <div class = "box">算法基本思路   {{ rating }}</div>
 
    <div id = "box2">
      <table>
        <ul>
          <li> 请输入明文<input type="text" id="txtName"></li>
          <li> 密文为: <span class="one"></span></li>
            <li> 请输入秘文<input type="text" id="retxtName"></li>
            <li> 明文为: <span class="two"></span></li>
          </ul>
      </table>   
    </div>
    <br/>
    <div>陈嘉乐</div>
    <div>信息安全课程</div>

</div>
  <router-view/>
</template>

<script>
import $ from 'jquery';
import { ref } from 'vue';


$(function(){
  $('#txtName').blur(function(){
    $.get({
      url: "http://127.0.0.1:2222/ras/encry/",
      data:{
        "name":$(this).val()
      },
      success: function(data)
      {
        $('span.one').text(data);
      }
    })
  })

})

$(function(){
  $('#retxtName').blur(function(){
    $.get({
      url: "http://127.0.0.1:2222/ras/reencry/",
      data:{
        "name":$(this).val()
      },
      success: function(data)
      {
        $('span.two').text(data);
      }
    })
  })

})


export default{
  name: "RSA",
  setup: () => {
    let name = ref("");
    let rating = ref("");

    $.ajax({
      url :"http://127.0.0.1:2222/ras/passed/",
      type : "get",
      success: resp => {
        name.value = resp.name;
        rating.value = resp.rating;
      }
    });
    return {
      name,
      rating,
    }
  }
}


</script>
<style>
div{
  font-size: 40px;
}
body{
  background-image: url("./assets/background.jpg");
  background-size: cover;
}
.box{
  margin-top: 45px;
  margin-left: 10px;
  margin-right: 40px;
  padding: 6px;
  float: left;
  font-size: 30px;
  width: 800px;
  height: 300px;
  border-style: double;
  border-width: 6px;
  font-size: 30px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
#box1{
  margin-top: 30px;
}
#box2{
  font-size: 35px;
}
input{
  height: 26px;
  line-height: 26px;
  font-size: 26px;
}
span{
  font-size: 25px;
  font-weight: bold;
}

</style>
